<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@表白墙</title>
    <style>
        html, body {
            /* 
                html 是页面的最顶层元素. 高度 100% 是相对父元素来说高度是 100% (和父元素一样高)
            */
            height: 100%;
        }
        /* 设置背景图 */
<!--        body {-->
<!--            background-image: url(image/cat.jpg);-->
<!--            background-repeat: no-repeat;-->
<!--            background-size: cover;-->
<!--            background-position: center center;-->
<!--        }-->
        /* 消除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing:border-box;
            
        }
        .container {
            width: 600px;
            margin:20px auto;
        }
        h1 {
            text-align: center;
        }
        p {
            text-align: center;
            color: lightblue;
            margin: 20px 0; 
        }
        .row {
            /* 水平布局 */
            display: flex;
            height: 40px;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }
        .row span {
            width: 80px;
        }
        .row input {
            width: 200px;
            height: 30px;
            border-radius: 5px;
            padding: 10px;
        }
        .row button {
            width: 280px;
            height: 30px;
            color:white;
            background-color: gold;
            /* 去除边框 */
            border: none;
            /* 圆角 */
            border-radius: 5px;
        }
        /* 点击的反馈效果 */
        .row button:active{
            background-color: gainsboro;
        }

    </style>
</head>
<body>
<div class="container">
    <h1>表白墙</h1>
    <p>输入内容后点击提交，信息会自动留存在下方表白墙中</p>
    <div class="row">
        <span>谁：</span>
        <input type="text">
    </div>
    <div class="row">
        <span>对谁：</span>
        <input type="text">
    </div>
    <div class="row">
        <span>说：</span>
        <input type="text">
    </div>
    <div class="row">
        <button id="submit">提交</button>
    </div>
    <div class="row">
        <button id="revert">撤销</button>
    </div>
</div>
<!-- 引入jquery的ajax -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
        //提交内容，上传给服务器，并显示到页面上
        let conDiv=document.querySelector('.container');
        let inputs=document.querySelectorAll('input');
        let button=document.querySelector('#submit');
        button.onclick=function(){
            //获取输入数据
            let from=inputs[0].value;
            let to=inputs[1].value;
            let msg=inputs[2].value;
            if(from==''||to==''||msg==''){//非空校验
                return;
            }
            //创建row-div
            let rowDiv=document.createElement('div');
            rowDiv.className='row message';
            rowDiv.innerHTML=from+' 对 '+to+' 说： '+msg;
            conDiv.appendChild(rowDiv);//添加到页面上
            //清空之前输入的数据
            for(let input of inputs){
                input.value='';
            }
            //将数据发送给服务器
            let body={
                "from":from,
                "to":to,
                "message":msg
            };
            let strBody=JSON.stringify(body);//将js对象转变成json字符串
            $.ajax({
                type:'post',
                url:'message',
                data:strBody,
                contentType:"application/json; charset=utf8",
                success: function(body){
                    console.log("数据发送成功")
                }
            });
        }
        let revertButton=document.querySelector('#revert');
        revertButton.onclick=function(){
            let rows=document.querySelectorAll('.message');
            if(rows==null||rows.length==0){
                return;
            }
            conDiv.removeChild(rows[rows.length-1]);//从页面中删除
            //发送delete删除服务器数据
             $.ajax({
                type: 'delete',
                url: 'message',
                success: function (body) {
                    console.log("数据撤销成功")
                }
            });
        }
        //页面加载时，从服务器中获取留言数据
        $.ajax({
            type:'get',
            url:'message',
            success:function(body){
                //body在拿到的时候就已经为js对象数据（ajax自动识别转换）
                //遍历添加到页面中
                for(let message of body){
                    let rowDiv = document.createElement('div');
                    rowDiv.className = 'row message';
                    rowDiv.innerHTML = message.from + ' 对 ' + message.to+' 说： '+message.message;
                    conDiv.appendChild(rowDiv);
                }
            }
        });

</script>
</body>
</html>